<template>
	<view class="updateMy1">
		<view class="updateMy2">
			<view class="backgroundHead"></view>
			<view class="imgMy">
				<img src="@/static/男头像.png" />
			</view>
			<view class="name">
				<text>姓名：</text>
				<input type="text" :placeholder="item.name" v-model="inputs.name" />
			</view>
			<view class="sex">
				<text>性别：</text>
				<picker mode="selector" :range="sexs" @change="changeSex">
					<view class="picker" style="color: #9c9c9c">{{ show.sex || '点击选择' }}</view>
				</picker>
			</view>
			<view class="phone">
				<text>手机号：</text>
				<input type="text" v-model="inputs.phone" :placeholder="show.phone" />
			</view>
			<view class="role">
				<text>权限：</text>
				{{ show.role }}
			</view>
			<view class="isShowUpdate" v-show="isShowUpdate">
				<button @click="update()">修改</button>
			</view>
		</view>
	</view>
</template>

<script>
import { request } from '../../request';
export default {
	computed: {
		isShowUpdate() {
			if (
				(this.inputs.name != null && this.inputs.name != '') ||
				(this.inputs.sex != null && this.inputs.sex != '') ||
				(this.inputs.phone != null && this.inputs.phone != '')
			) {
				return true;
			}
			return false;
		}
	},
	data() {
		return {
			item: {
				name: null,
				sex: null,
				phone: null,
				role: null
			},
			show: {
				name: null,
				role: null,
				sex: null,
				phone: null
			},
			inputs: {
				name: null,
				sex: null,
				phone: null
			},
			sexs: ['男', '女']
		};
	},
	methods: {
		changeSex(e) {
			const index = e.detail.value; // 获取选中的索引
			this.show.sex = this.sexs[index]; // 更新选中的值
			this.inputs.sex = this.sexs[index]; // 更新选中的值
		},
		update() {
			// 等待查询完毕仓库，查询元器件
			request('public/updateUserByToken', this.inputs, 'POST').then((res) => {
				if (res.data.code != 200) {
					this.$message.error('   ' + res.data.msg);
					return;
				}
				this.$message.success('           修改成功');
			});
		}
	},
	onLoad() {
		request('public/selectMyUser', {}, 'GET').then((res) => {
			if (res.data.code != 200) {
				this.$message.error('   ' + res.data.msg);
				return;
			}
			console.log(res.data.data);
			// 权限展示
			this.item = res.data.data;
			if (res.data.data.role == 'admin') {
				this.show.role = '管理员';
			} else if (res.data.data.role == 'user') {
				this.show.role = '用户';
			} else if (res.data.data.role == 'accountant') {
				this.show.role = '核销员';
			}

			// 性别展示
			if (res.data.data.sex == null || res.data.data.sex == '') {
				this.show.sex = '点击选择';
			} else {
				this.show.sex = res.data.data.sex;
			}

			// 手机号展示设置
			if (res.data.data.phone == null || res.data.data.phone == '') {
				this.show.phone = '输入手机号';
			} else {
				this.show.phone = res.data.data.phone;
			}
		});
	}
};
</script>

<style scoped>
page {
	/* 	display: flex;
	justify-content: center; */
}

.updateMy1 {
	display: flex;
	justify-content: center;
}

.updateMy2 {
	width: 70%;
	padding: 100rpx;
	background-color: #fff;
	border-radius: 16rpx;
	margin-top: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.imgMy {
	margin: 0 auto 30rpx;
	display: flex;
	justify-content: center;
}

.imgMy img {
	width: 80px;
	height: 80px;
	z-index: 99;
}
input {
	width: 300rpx;
}

.name {
	margin-top: 100rpx;
}

.picker {
	width: 200rpx;
}
.name,
.sex,
.phone,
.role {
	display: flex;
	align-items: center;
	padding: 35rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.name:last-child,
.sex:last-child,
.phone:last-child,
.role:last-child {
	border-bottom: none;
}

.name text,
.sex text,
.phone text,
.role text {
	/* width: 130rpx; */
	padding-right: 30rpx;
	color: #666;
}

.name,
.sex,
.phone {
	color: #333;
}

.role {
	color: #1677ff;
	font-weight: 500;
}

.isShowUpdate button {
	margin-top: 100rpx;
	border-radius: 5rcap;
	color: white;
	background: linear-gradient(200deg, #2f80ed, #56ccf2);
}
</style>
